<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小米商城 - Xiaomi 13、Redmi K60、MIX FOLD 2，小米电视官方网站</title>
    <!--    重置样式表-->
    <link rel="stylesheet" href="./css/reset.css">
    <!--    图标字体库-->
    <link rel="stylesheet" href="./css/all.css">
    <!--    引入基础样式表-->
    <link rel="stylesheet" href="./css/base.css">
    <!--    本页面的样式表-->
    <link rel="stylesheet" href="./css/index.css">
<!--    设置收藏夹图标，收藏夹的图片是一个格式为ico
    http://www.ico8.net/index.php?action=make
-->
    <link rel="icon" href="./favicon.ico" type="image/x-icon" />

</head>
<body>
<header class="top-nav">
    <div class="nav-inner w">
        <div class="link-wrap">
            <a href="#">小米官网</a>
            <span class="sep">|</span>
            <a href="#">小米商城</a>
            <span class="sep">|</span>
            <a href="#">MIUI</a>
            <span class="sep">|</span>
            <a href="#">loT</a>
            <span class="sep">|</span>
            <a href="#">云服务</a>
            <span class="sep">|</span>
            <a href="#">天星数科</a>
            <span class="sep">|</span>
            <a href="#">有品</a>
            <span class="sep">|</span>
            <a href="#">小爱开放平台</a>
            <span class="sep">|</span>
            <a href="#">企业团购</a>
            <span class="sep">|</span>
            <a href="#">资质证照</a>
            <span class="sep">|</span>
            <a href="#">协议规则</a>
            <span class="sep">|</span>
            <a class="download-app" href="#">
                下载app
                <div class="hide">
                    <div class="inner">
                        <img src="./images/download.png" alt="二维码">
                        <span>小米商城APP</span>
                    </div>
                </div>
            </a>
            <span class="sep">|</span>
            <a href="#">Select Location</a>
        </div>

        <div class="user-info">
            <a href="#">登录</a>
            <span class="sep">|</span>
            <a href="#">注册</a>
            <span class="sep">|</span>
            <a href="#">消息通知</a>
            <a class="cart" href="#">
                <i class="fa-solid fa-shopping-cart"></i>
                <span>购物车（0）</span>
            </a>
        </div>
    </div>
</header>

<div class="top-header">
    <div class="w">
        <!--        设置logo-->
        <h1 class="logo">
            <a href="#" title="小米官网">
                小米官网
            </a>
        </h1>

        <!--        设置中间的导航条-->
        <ul class="menu">
            <li>
                <a class="category" href="javascript:;">全部商品分类</a>
                <nav class="left-nav">
                    <a href="javascript:;">手机</a>
                    <a href="javascript:;">电视</a>
                    <a href="javascript:;">家电</a>
                    <a href="javascript:;">笔记本 平板</a>
                    <a href="javascript:;">出行 穿戴</a>
                    <a href="javascript:;">耳机 音箱</a>
                    <a href="javascript:;">健康 儿童</a>
                    <a href="javascript:;">生活 箱包</a>
                    <a href="javascript:;">智能 路由器</a>
                    <a href="javascript:;">电源 配件</a>
                </nav>

            </li>
            <li><a href="javascript:;">Xiaomi手机</a></li>
            <li><a href="javascript:;">Redmi手机</a></li>
            <li><a href="javascript:;">电视</a></li>
            <li><a href="javascript:;">笔记本</a></li>
            <li><a href="javascript:;">平板</a></li>
            <li><a href="javascript:;">家电</a></li>
            <li><a href="javascript:;">路由器</a></li>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">社区</a></li>
        </ul>

        <!--        创建一个表单-->
        <form action="#" class="search-form">
            <input type="text" placeholder="手机">
            <button>
                <i class="fa-solid fa-search"></i>
            </button>
            <!--            创建一个隐藏div-->
            <div class="hide"></div>
        </form>

    </div>
</div>

<div class="banner w">
    <ul class="img-list">
        <li><a href="#"><img src="./images/banner/1.jpg"></a></li>
        <li><a href="#"><img src="./images/banner/2.webp"></a></li>
        <li><a href="#"><img src="./images/banner/3.webp"></a></li>
        <li><a href="#"><img src="./images/banner/4.webp"></a></li>
    </ul>

<!--    左右翻页-->
    <div class="prev-next">
        <a href="javascript:" class="prev"></a>
        <a href="javascript:" class="next"></a>
    </div>

<!--    导航小点-->
    <div class="pointer">
        <a href="javascript:"></a>
        <a class="active" href="javascript:"></a>
        <a href="javascript:"></a>
        <a href="javascript:"></a>
    </div>
</div>

<!-- 下部内容-->
<div class="sub w">
    <ul class="home-channel-list">
        <li>
            <a href="#">
                <i class="fa-solid fa-clock"></i>
                <span>保障服务</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-solid fa-building"></i>
                <span>企业团购</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-solid fa-spider"></i>
                <span>F码通道</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-solid fa-sim-card"></i>
                <span>米粉卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-solid fa-recycle"></i>
                <span>以旧换新</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-solid fa-mobile"></i>
                <span>话费充值</span>
            </a>
        </li>
    </ul>
    <div class="home-promo">
        <a href="#">
            <img src="./images/1.jpg" alt="">
        </a>
    </div>
    <div class="home-promo">
        <a href="#">
            <img src="./images/2.jpg" alt="">
        </a>
    </div>
    <div class="home-promo">
        <a href="#">
            <img src="./images/3.jpg" alt="">
        </a>
    </div>
</div>

<!--固定定位元素-->
<div class="side-bar"></div>
</body>
</html>